<template>
  <div>
    <!-- 查询区域 -->
    <el-card class="search-card">
      <el-form
          :inline="true"
          :model="searchForm"
          class="search-form"
      >
        <el-form-item label="用户名称">
          <el-input
              v-model="searchForm.roleName"
              placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              @click="handleSearch"
          >
            查询
          </el-button>
          <el-button @click="resetSearch">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据表格 -->
    <el-card>
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
      >
        <el-table-column
            prop="roleName"
            label="序号"
            width="180"
        ></el-table-column>

        <el-table-column
            prop="remark"
            label="手机号"
            width="120"
        ></el-table-column>

        <el-table-column
            prop="rolePermissions"
            label="账户显示名"
            width="220"
        >
          <template slot-scope="scope">
            <div
                v-for="(item, index) in scope.row.rolePermissions"
                :key="index"
            >
              {{ getLabelPath(data, item) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="remark"
            label="状态"
            width="120"
        ></el-table-column>

        <el-table-column
            label="操作"
            width="300"
            fixed="right"
        >
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="updateStatus(scope.row)"
            >
              编辑
            </el-button>

            <el-button
                size="mini"
                type="primary"
                @click="bingUser(scope.row)"
            >
              授权用户
            </el-button>

            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="pagination"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'RoleManagement',
  data() {
    return {
      searchForm: {
        roleName: ''
      },
      tableData: [],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    handleSearch() {
      // 查询逻辑
    },
    resetSearch() {
      this.searchForm.roleName = ''
      // 重置查询逻辑
    },
    handleAdd() {
      // 新增逻辑
    },
    updateStatus() {
      // 编辑逻辑
    },
    bingUser() {
      // 授权用户逻辑
    },
    handleDelete() {
      // 删除逻辑
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      // 分页大小改变逻辑
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      // 当前页改变逻辑
    },
    getLabelPath() {
      // 获取权限标签路径逻辑
    }
  }
}
</script>

<style scoped>
.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
}

.operation-serviceRegion {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
